<template> 
  <view class="container"> 
    <!-- 顶部导航栏 --> 
    <view class="nav-bar"> 
      <view class="back" @click="navigateBack"> 
        <uni-icons type="left" size="20" color="#fff"></uni-icons> 
      </view> 
      <view class="title">消费记录</view> 
      <view class="right"> 
        <uni-icons type="more-filled" size="20" color="#fff"></uni-icons> 
      </view> 
    </view> 
    
    <!-- 消费记录列表 --> 
    <view class="bg"> 
    </view> 
    <view class="record-list-outer"> 
      <view class="record-list"> 
        <view class="record-item" v-for="(item, index) in records" :key="index"> 
          <view class="record-content"> 
            <view class="record-title">{{ item.title }}</view> 
            <view class="record-time">{{ item.time }}</view> 
          </view> 
          <view class="record-amount">{{ item.amount }}</view> 
        </view> 
      </view> 
    </view> 
  </view> 
</template> 

<script setup>
import { ref } from 'vue';

// 定义数据
const records = ref([ 
  { 
    title: '大美汽车维修店-洗车', 
    time: '2023.3.11 11:09', 
    amount: '-50元' 
  }, 
  { 
    title: '大美汽车维修店-洗车', 
    time: '2023.3.11 11:09', 
    amount: '-50元' 
  }, 
  { 
    title: '大美汽车维修店-洗车', 
    time: '2023.3.11 11:09', 
    amount: '-50元' 
  }, 
  { 
    title: '大美汽车维修店-洗车', 
    time: '2023.3.11 11:09', 
    amount: '-50元' 
  } 
]);

// 定义方法
const navigateBack = () => {
  uni.navigateBack();
};
</script> 

<style lang="scss" scoped> 
  .record-list-outer{ 
    background-color: white; 
    margin-left: 10px; 
    margin-right: 10px; 
    margin-top: -200rpx; 
    border-radius: 20px; 
  } 
  .bg{ 
    width: 100%; 
    height: 250rpx; 
    background-color: #007aff; 
  } 
  .container { 
    min-height: 100vh; 
    background-color: #f5f5f5; 
  } 

  .nav-bar { 
    display: flex; 
    align-items: center; 
    height: 44px; 
    background-color: #007AFF; 
    color: #fff; 
    padding: 0 15px; 
    
    .back { 
      width: 44px; 
    } 
    
    .title { 
      flex: 1; 
      text-align: center; 
      font-size: 18px; 
    } 
    
    .right { 
      width: 44px; 
      text-align: right; 
    } 
  } 

  .record-list { 
    margin-left: 10px; 
    margin-right: 10px; 
    margin-top: -200rpx; 
    border-top-right-radius: 20px; 
    border-top-left-radius: 20px; 
    padding: 10px; 
    
    .record-item { 
      background-color: #fff; 
      border-radius: 8px; 
      padding: 15px; 
      margin-bottom: 10px; 
      display: flex; 
      justify-content: space-between; 
      align-items: flex-start; 
      
      .record-content { 
        flex: 1; 
        
        .record-title { 
          font-size: 16px; 
          color: #333; 
          margin-bottom: 5px; 
        } 
        
        .record-time { 
          font-size: 14px; 
          color: #999; 
        } 
      } 
      
      .record-amount { 
        font-size: 16px; 
        color: #333; 
        font-weight: 500; 
      } 
    } 
  } 
</style> 